<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Radio Test</title>
</head>
<body>
    <div id="app1">
        <input type="radio" :checked="picked">
        <label>单选按钮</label>
    </div>
    <br>
    <p>-----------------------------华丽的分割线-----------------------------</p>
    <div id="app2">
        <input type="radio" v-model="picked" value="html" id="html">
        <label for="html">HTML</label>
        <br>
        <input type="radio" v-model="picked" value="js" id="js">
        <label for="js">JavaScript</label>
        <br>
        <input type="radio" v-model="picked" value="css" id="css">
        <label for="css">CSS</label>
        <br>
        <p>选择的项是：{{ picked }}</p>
    </div>
    <br>
    <p>-----------------------------华丽的分割线-----------------------------</p>
    <div id="app3">
        <input type="radio" v-model="picked" :value="value">
        <label>单选按钮</label>
        <p>{{ picked }}</p>
        <p>{{ value }}</p>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>
        var app1 = new Vue({
            el: '#app1',
            data: {
                picked: false
            }
        });
        var app2 = new Vue({
            el: '#app2',
            data: {
                picked: 'js'
            }
        });
        var app3 = new Vue({
            el: '#app3',
            data: {
                picked: false,
                value: 123
            }
        })
    </script>
</body>
</html>